<template>
  <div id="mainLeft">
    <div class="search">
      <i class="el-icon-search"></i>
      <input v-model="searchName" type="text" placeholder="搜索组件名称，模糊搜索" />
    </div>
    <div class="search-input">
      <ul class="module-center">
        <li
          v-show="v.name.indexOf(searchName) > -1 && searchName != ''"
          v-for="(v,i) in urlPage=='2'?moduleList:moduleList"
          :key="i"
        >
          <div @click="pushGroup(v.en)">
            <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
              <use :xlink:href="v.icon" />
            </svg>
            <p>{{v.name}}</p>
          </div>
        </li>
      </ul>
    </div>
    <el-collapse v-show="searchName==''" v-model="open">
      <el-collapse-item title="基础组件" name="1">
        <ul class="module-center">
          <li v-if="v.type.indexOf(urlPage)>-1" v-for="(v,i) in moduleList.slice(0,15)" :key="i">
            <div @click="pushGroup(v.en)">
              <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                <use :xlink:href="v.icon" />
              </svg>
              <p>{{v.name}}</p>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-show="searchName==''" v-model="open2">
      <el-collapse-item title="营销组件" name="2">
        <ul class="module-center">
          <li v-if="v.type.indexOf(urlPage)>-1" v-for="(v,i) in moduleList.slice(15,21)" :key="i">
            <div @click="pushGroup(v.en)">
              <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                <use :xlink:href="v.icon" />
              </svg>
              <p>{{v.name}}</p>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-show="searchName==''" v-model="open3">
      <el-collapse-item title="功能组件" name="3">
        <ul class="module-center">
          <li v-if="v.type.indexOf(urlPage)>-1" v-for="(v,i) in moduleList.slice(21,26)" :key="i">
            <div @click="pushGroup(v.en)">
              <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                <use :xlink:href="v.icon" />
              </svg>
              <p>{{v.name}}</p>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <div v-show="urlPage=='2'">
      <el-collapse v-show="searchName==''" v-model="open4">
        <el-collapse-item title="会员中心组件" name="4">
          <ul class="module-center">
            <li v-if="v.type.indexOf(urlPage)>-1" v-for="(v,i) in moduleList.slice(26,28)" :key="i">
              <div @click="pushGroup(v.en)">
                <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                  <use :xlink:href="v.icon" />
                </svg>
                <p>{{v.name}}</p>
              </div>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "mainLeft",
  data() {
    return {
      zhuangxiuPage:0,
      open: "1",
      open2: "2",
      open3: "3",
      open4: "4",
      searchName: "",
      moduleList: [
        { type: "1", name: "固定定位", icon: "#icondingwei1", en: "fixed" },
        { type: "123", name: "搜索框", icon: "#iconsousuo", en: "search" },
        { type: "123", name: "公告", icon: "#icongonggao", en: "notice" },
        {
          type: "123",
          name: "图片轮播",
          icon: "#iconcarousel",
          en: "picLunbo",
        },
        {
          type: "123",
          name: "按钮组",
          icon: "#iconzujianku-anniuzu",
          en: "btn",
        },
        { type: "123", name: "图片", icon: "#iconlunbotu", en: "pictures" },
        { type: "123", name: "标题栏", icon: "#iconbiaotikuang", en: "titles" },
        {
          type: "123",
          name: "辅助空白",
          icon: "#iconfuzhukongbai",
          en: "blank",
        },
        {
          type: "123",
          name: "辅助线",
          icon: "#iconfengexiantiao",
          en: "lines",
        },
        {
          type: "0",
          name: "更多门店",
          icon: "#iconmendian",
          en: "storeMessage",
        },
        { type: "123", name: "富文本", icon: "#iconfuwenben", en: "book" },
        { type: "0", name: "选项卡", icon: "#iconxuanxiangqia", en: "card" },
        { type: "123", name: "列表导航", icon: "#iconliebiao", en: "listNav" },
        { type: "123", name: "热区", icon: "#iconrequ", en: "hot" },
        { type: "123", name: "魔方", icon: "#icontupian", en: "margic" },

        { type: "0", name: "优惠券", icon: "#iconyouhuiquan", en: "discount" },
        { type: "13", name: "商品组", icon: "#icontupian", en: "product" },
        { type: "13", name: "精选资讯", icon: "#icontupian", en: "information" },
        { type: "13", name: "评价列表", icon: "#icontupian", en: "storeEvaluate" },
        { type: "13", name: "券包列表", icon: "#icontupian", en: "storeRollbag" },
        { type: "13", name: "门店信息", icon: "#icontupian", en: "storeInformation" },

        { type: "123", name: "悬浮按钮", icon: "#icondiejia", en: "susBtn" },
        {
          type: "123",
          name: "关注条",
          icon: "#iconicon_concern",
          en: "attention",
        },
        {
          type: "0",
          name: "下单提醒",
          icon: "#iconpiliangxiadan",
          en: "remind",
        },
        {
          type: "13",
          name: "我的余额",
          icon: "#iconpiliangxiadan",
          en: "myBalance",
        },
        {
          type: "13",
          name: "视频播放",
          icon: "#iconpiliangxiadan",
          en: "storeVideo",
        },

        { type: "2", name: "会员信息", icon: "#iconhuiyuan", en: "vip" },
        {
          type: "2",
          name: "按钮组2",
          icon: "#iconzujianku-anniuzu",
          en: "btn2",
        },
      ],
    };
  },
  computed: {
    ...mapState([
      "list",
      "currentId",
      "susBtn",
      "attention",
      "remind",
      "urlPage",
    ]),
  },
  components: {},
  created() {
    this.zhuangxiuPage=localStorage.getItem('zhuangxiuPage');
  },
  mounted() {},
  methods: {
    ...mapMutations(["getList", "getCurrenChoose", "getCurrenChooseName"]),
    pushGroup(name) {
      switch (name) {
        case "search":
          if (JSON.stringify(this.list).indexOf("search") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "搜索框",
            name: "search",
            styles: {
              colorInput: "#fff",
              colorWord: "#C2C2C2",
              colorBg: "#f7f7f7",
              text: "请输入关键字进行搜索",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 14,
              wordStatus: "left",
            },
          });
          break;
        case "notice":
          this.list.push({
            title: "公告",
            name: "notice",
            styles: {
              source:"1",
              colorWord: "#212121",
              colorBg: "#fff",
              hand: [
                {
                  img: "",
                  title: "这里是第一条自定义公告标题",
                  url: "",
                },
              ],
            },
          });
          break;
        case "fixed":
          if (JSON.stringify(this.list).indexOf("fixed") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "固定定位",
            name: "fixed",
            styles: {
              module: "1",
              orPic: "1",
              orPicA: "1",
              isFloat:"1",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              percent:80,
              colorBg: "#fff",
              colorWord: "#343434",
              circle: 0,
              imgUrl: [{ img: "" }],
              upLoad1: {
                text: "",
                img: "",
                url: "",
              },
              upLoad2: {
                text: "",
                img: "",
                url: "",
              },
              floatUrl1: {
                text: "",
                img: "",
                url: "",
              },
              floatUrl2: {
                text: "",
                img: "",
                url: "",
              },
              imgUrl: [
                {
                  url: "",
                  img: "",
                },
              ],
            },
          });
          break;
        case "picLunbo":
          this.list.push({
            title: "图片轮播",
            name: "picLunbo",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 10,
              height: 200,
              imgUrl: [
                {
                  img: "",
                  url: "",
                },
              ],
            },
          });
          break;
        case "btn":
          this.list.push({
            title: "按钮组",
            name: "btn",
            styles: {
              line: "1",
              num: "4",
              marginTop: 0,
              marginBottom: 0,
              circle: 0,
              circleBtn: 0,
              colorBg: "#FFFFFF",
              colorWord: "#2c2c2c",
              btnList: [
                {
                  img: "",
                  word: "充值返现",
                  url: "",
                },
                {
                  img: "",
                  word: "领优惠券",
                  url: "",
                },
                {
                  img: "",
                  word: "直播",
                  url: "",
                },
                {
                  img: "",
                  word: "WIFI",
                  url: "",
                },
              ],
            },
          });
          break;
        case "pictures":
          this.list.push({
            title: "图片",
            name: "pictures",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
              paddingTop: 10,
              height: 100,
              imgUrl: [
                {
                  img: "",
                  url: "",
                },
              ],
            },
          });
          break;
        case "titles":
          this.list.push({
            title: "标题栏",
            name: "titles",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              wordStatus: "left",
              circle: 0,
              colorBg: "#fff",
              upLoad1: {
                text: "标题栏",
                img: "",
                url: "",
                colorWord: "#212121",
              },
              upLoad2: {
                text: "查看",
                img: "",
                url: "",
                colorWord: "#969696",
              },
            },
          });
          break;
        case "blank":
          this.list.push({
            title: "辅组空白",
            name: "blank",
            styles: {
              height: 10,
              colorBg: "#fff",
            },
          });
          break;
        case "lines":
          this.list.push({
            title: "辅组线",
            name: "lines",
            styles: {
              type: 1,
              colorBg: "#c2c2c2",
              height: 5,
              marginTB: 0,
            },
          });
          break;
        case "storeMessage":
          this.list.push({
            title: "更多门店",
            name: "storeMessage",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginRight: 0,
              marginLeft: 0,
            },
          });
          break;
        case "book":
          this.list.push({
            title: "富文本",
            name: "book",
            styles: {
              html: "",
              colorBg: "#fff",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
            },
          });
          break;
        case "card":
          this.list.push({
            title: "选项卡",
            name: "card",
            styles: {
              colorBg: "#fff",
              colorWord: "#999",
              colorSelect: "#2D8CF0",
              marginTop: 0,
              marginBottom: 0,
              marginRight: 40,
              cardList: [
                { name: "选项1" },
                { name: "选项2" },
                { name: "选项3" },
                { name: "选项4" },
                { name: "选项5" },
                { name: "选项6" },
                { name: "选项7" },
              ],
            },
          });
          break;
        case "margic":
          this.list.push({
            title: "魔方",
            name: "margic",
            styles: {
              type: "1",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
              shifting: 0,
              height:60,
              imgList1: [
                { img: "", url: "" },
                { img: "", url: "" },
                { img: "", url: "" },
                { img: "", url: "" },
              ],
            },
          });
          break;
        case "product":
          this.list.push({
            title: "商品组",
            name: "product",
            styles: {
              type: "1",
              typeBg: "1",
              colorBg: "rgba(0, 0, 0, 0)",
              img: "",
              typeBtn: "1",
              typePay: "-1",
              typeText: "推荐",
              colorBtn: "#ff0303",
              colorProductBg: "#fff",
              colorTitle: "#212121",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              typeProduct: "1",
              productName: [],
              productGroup: [],
              productMarket:"-1",
              productNum: "20",
            },
          });
          break;
        case "hot":
          this.list.push({
            title: "热区",
            name: "hot",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
              img: "",
              divStyles: [],
            },
          });
          break;
        case "susBtn":
          if (this.susBtn[0].styles.status) {
            this.$message.error("此元素最多允许添加一个！");
          }
          this.susBtn[0].styles.status = 1;
          this.getCurrenChoose(-2);
          this.getCurrenChooseName(name + "Change");
          return false;
          break;
        case "attention":
          if (this.attention[0].styles.status) {
            this.$message.error("此元素最多允许添加一个！");
          }
          this.attention[0].styles.status = 1;
          this.getCurrenChoose(-3);
          this.getCurrenChooseName(name + "Change");
          return false;
          break;
        case "remind":
          if (this.remind[0].styles.status) {
            this.$message.error("此元素最多允许添加一个！");
          }
          this.remind[0].styles.status = 1;
          this.getCurrenChoose(-4);
          this.getCurrenChooseName(name + "Change");
          return false;
          break;
        case "vip":
          if (JSON.stringify(this.list).indexOf("vip") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "会员信息",
            name: "vip",
            styles: {
              bgType: "1",
              colorBg: "#FF3C29",
              img: "",
              colorName: "#fff",
              btnStatus: [true, true, true, true],
              colorNumber: "#212121",
              colorTitle: "#212121",
              colorBorder: "#eee",
              vipStatus: "1",
            },
          });
          break;
        case "listNav":
          this.list.push({
            title: "列表导航",
            name: "listNav",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              leftColor: "#212121",
              rightColor: "#969696",
              img: "",
              imgUrl: [
                { img: "", leftWord: "文字1", rightWord: "查看", url: "" },
                { img: "", leftWord: "文字2", rightWord: "查看", url: "" },
                { img: "", leftWord: "文字3", rightWord: "查看", url: "" },
              ],
            },
          });
          break;
        case "discount":
          this.list.push({
            title: "优惠券",
            name: "discount",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
            },
          });
          break;
        case "information":
          this.list.push({
            title: "精选资讯",
            name: "information",
            styles: {
              title: "精选资讯",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
            },
          });
          break;
        case "storeEvaluate":
          if (JSON.stringify(this.list).indexOf("storeEvaluate") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "评价列表",
            name: "storeEvaluate",
            styles: {
              title: "评价列表",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
            },
          });
          break;
        case "storeRollbag":
          if (JSON.stringify(this.list).indexOf("storeRollbag") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "券包列表",
            name: "storeRollbag",
            styles: {
              title: "券包列表",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
              colorBg: "#FB6F3E",
            },
          });
          break;
        case "storeInformation":
          if (JSON.stringify(this.list).indexOf("storeInformation") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "门店信息",
            name: "storeInformation",
            styles: {
              title: "门店信息",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
            },
          });
          break;
        case "btn2":
          this.list.push({
            title: "按钮组2",
            name: "btn2",
            styles: {
              num: "4",
              marginTop: 0,
              marginBottom: 0,
              circle: 0,
              colorBg: "#FFFFFF",
              colorWord: "#2c2c2c",
              title: "我的列表",
              arrange: "1",
              fontSize: 12,
              width:20,
              btnList: [
                {
                  img: "",
                  word: "充值返现",
                  url: "",
                },
                {
                  img: "",
                  word: "领优惠券",
                  url: "",
                },
                {
                  img: "",
                  word: "直播",
                  url: "",
                },
                {
                  img: "",
                  word: "WIFI",
                  url: "",
                },
              ],
            },
          });
          break;
        case "myBalance":
          if (JSON.stringify(this.list).indexOf("myBalance") > 0) {
            this.$message.error("此元素最多允许添加一个！");
            return false;
          }
          this.list.push({
            title: "我的余额",
            name: "myBalance",
            styles: {
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
              type: 1,
              colorBg: "#fff",
              upLoad1: {
                text: "查看我的会员权益",
              },
            },
          });
          break;
        case "storeVideo":
          // if (JSON.stringify(this.list).indexOf("storeVideo") > 0) {
          //   this.$message.error("此元素最多允许添加一个！");
          //   return false;
          // }
          this.list.push({
            title: "视频播放",
            name: "storeVideo",
            styles: {
              title: "视频播放",
              marginTop: 0,
              marginBottom: 0,
              marginLeft: 0,
              marginRight: 0,
              circle: 0,
              links:'',
              upLoad1: {
                img: "",
                url: "",
              },
            },
          });
          break;
      }
      this.getList(JSON.stringify(this.list));
      if (this.list.length == 0) {
        this.getCurrenChoose(this.list.length);
      } else {
        this.getCurrenChoose(this.list.length - 1);
      }
      this.getCurrenChooseName(name + "Change");
    },
  },
};
</script>


<style lang="less" scoped>
@import url("../../assets/css/base.less");
/deep/.el-collapse-item__content {
  padding-bottom: 0;
}
#mainLeft {
  background-color: #fff;
  .search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 45px;
    padding-left: 20px;
    border-bottom: 1px solid #e9edef;
    > input {
      width: 260px;
      border: 0;
      outline: none;
      margin-left: 10px;
    }
    > input::-webkit-input-placeholder {
      color: #c5c8ce;
      font-size: 14px;
    }
  }
  .search-input {
    padding: 15px 15px 0;
  }
  .module-center {
    display: flex;
    flex-wrap: wrap;
    > li:hover {
      border: 1px solid @mainColor;
      background-color: @mainColorOpacity;

      color: @mainColor;
    }
    > li {
      width: 82px;
      height: 82px;
      border-radius: 4px;
      text-align: center;
      background-color: #f4f6f8;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #f4f6f8;
      transition: all 0.5s;
      cursor: pointer;
      > div {
        > p {
          margin-top: 5px;
          color: #636669;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
    // > li:nth-child(3n) {
    //   margin-right: 0 !important;
    // }
  }
}
</style>
